<template>
  <el-form :model="detailForm" ref="detailForm" :inline="false">
    <el-card class="box-card">
      <div slot="header" class="header-card">
        <span class="header-card-title">批量处理</span>
      </div>

      <el-row>
        <el-col>
          <el-table ref="multipleTable" :data="detailForm.insuranceVoList" tooltip-effect="dark" style="width: 100%"
                    :header-cell-class-name="headerClass" @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" width="30"/>-->
<!--            <el-table-column label="操作" width="50">-->
<!--              <template #default="{row}">-->
<!--                <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']" @click="handleEdit(row)">编辑-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column align="center" label="车辆产权" show-overflow-tooltip min-width="160"
                             prop="propertyRightName"/>
            <el-table-column align="center" label="车辆归属" show-overflow-tooltip min-width="160"
                             prop="ascription"/>
            <el-table-column align="center" label="车辆运营" show-overflow-tooltip min-width="120"
                             prop="operationsName"/>
            <el-table-column align="center" label="车辆大区" show-overflow-tooltip min-width="160">
              <template #default="{row}">
                <span v-if="row.region">{{ row.region }} </span>
               
              </template>
            </el-table-column>
            <el-table-column label="车牌号" prop="carNo" min-width="140"/>
            <el-table-column label="车架号" prop="vinNo" min-width="180"/>
            <el-table-column label="发动机号" prop="engineNo" min-width="180"/>
            <el-table-column label="车型" show-overflow-tooltip width="200">
              <template #default="{row}">
                {{ row.modelName ? '/' + row.modelName : '' }}
              </template>
            </el-table-column>
            <el-table-column label="座位数" prop="seatNum" min-width="100"/>
            <el-table-column label="投保渠道" min-width="100">
              <template #default="{row}">
                <span v-show="row.insuranceChannels === 1">我司购买/非店保</span>
                <span v-show="row.insuranceChannels === 2">店端投保</span>
                <span v-show="row.insuranceChannels === 3">客户自购</span>
              </template>
            </el-table-column>
            <el-table-column label="合计费用" prop="totalAmount" min-width="100"/>

            <!--交强险-->
            <el-table-column label="交强险" align="center">
              <el-table-column label="租赁禀议保险公司" min-width="150" prop="rentInsuranceCompany"/>
              <el-table-column label="保险公司" vwidth="150" prop="jqxCompany" />
              <el-table-column label="交强险起保日" min-width="130" prop="jqxExpectBeginTime" />
              <el-table-column label="交强险到期日" min-width="130" prop="jqxExpectEndTime" />
              <el-table-column label="性质" min-width="100" prop="jqxInsuranceType">
                <template #default="{row}">
                  <span>
                      {{ row.jqxInsuranceType === '1' ? '运营' : row.jqxInsuranceType === '2' ? '非运营' : '' }}
                    </span>
                </template>
              </el-table-column>
              <el-table-column label="交强险保费" min-width="100" prop="jqxAmount" />
              <el-table-column label="车船税费用" min-width="100" prop="carTax" />
            </el-table-column>

            <!--商业险-->
            <el-table-column label="商业险" align="center">
              <el-table-column label="租赁禀议保险公司" min-width="140" prop="rentInsuranceCompany"/>
              <el-table-column label="保险公司" min-width="140" prop="syxCompany" />
              <el-table-column label="商业险起保日" min-width="120" prop="syxExpectBeginTime" />
              <el-table-column label="商业险到期日" min-width="120" prop="syxExpectEndTime" />
              <el-table-column label="性质" min-width="100" prop="syxInsuranceType" />
              <el-table-column label="商业险保费" min-width="100" prop="syxAmount" />
            </el-table-column>

            <!--其他险种-->
            <el-table-column label="其他险种" align="center">
              <el-table-column label="其他险种备注" min-width="140" prop="otherInsuranceRemark" />
              <el-table-column label="其他险种保费" min-width="140" prop="otherInsuranceSumAmount" />
            </el-table-column>

            <el-table-column label="商业险保单号" prop="syxPolicyCode" min-width="140" />
            <el-table-column label="交强险保单号" prop="jqxPolicyCode" min-width="140" />
            <el-table-column label="商业险保单" prop="syxPolicyUrl" min-width="100">
              <template #default="{row}">
                <el-form-item class="formTable">
                  <el-popover placement="left"
                              trigger="click">
                    <image-common v-model="row.syxPolicyUrl" :disabled="true" :limit="20" :up-type="2"/>
                    <el-button type="text" slot="reference">查看</el-button>
                  </el-popover>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="交强险保单" prop="jqxPolicyUrl" min-width="100">
              <template #default="{row}">
                <el-form-item class="formTable">
                  <el-popover placement="left"
                              trigger="click">
                    <image-common v-model="row.jqxPolicyUrl" :disabled="true" :limit="20" :up-type="2"/>
                    <el-button type="text" slot="reference">查看</el-button>
                  </el-popover>
                </el-form-item>
              </template>
            </el-table-column>

          </el-table>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
import {getInsuranceSelectList} from "@/api/cwgd/insuranceSelect";
export default {
  name: "client",//客户自购批量审核
  components: {},
  props: {
    value: {
      type: Object,
      default: {},
    },
    isEdit: {
      type: Boolean,
      default: true,
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
  },
  watch: {},
  data() {
    return {
      headerStar: [
        "jqxCompany",
        "jqxExpectBeginTime",
        "jqxExpectEndTime",
        "jqxInsuranceType",
        "jqxAmount",
        "jqxAmount",
        "carTax",

        "syxExpectBeginTime",
        "syxExpectBeginTime",
        "syxInsuranceType",
        "syxAmount",
      ],
      indexTable: 0,
      optionsData: [],
    };
  },
  created() {
   this.handleOptionsList()
  },
  mounted() {},
  methods: {
    handleSelectionChange() {},

    headerClass({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerStar.includes(row[i].property) && i == columnIndex) {
          return "header-class";
        }
      }
    },

    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;

      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
      this.handleNumber(key);
    },

    handleNumber(key) {
      let a =
        Number(this.detailForm.insuranceVoList[key]?.jqxAmount || 0) +
        Number(this.detailForm.insuranceVoList[key]?.carTax || 0) +
        Number(this.detailForm.insuranceVoList[key]?.syxAmount || 0) +
        Number(this.detailForm.insuranceVoList[key]?.otherInsuranceSumAmount || 0);
      this.$set(this.detailForm.insuranceVoList[key], "totalAmount", a);
    },

    handleEdit() {},

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },

    handleOptionsList() {
      getInsuranceSelectList({businessTypeCode:"5"}).then((res) => {
        if (res.code === 200) {
          this.optionsData = res.data;
        }
      });
    },

    handleChange(val,type,index){
      let obj = this.optionsData.map(a=>{
        if(val === a.supplierId){
          return{
            name:a.supplierName,
            code:a.supplierCode,
            id:a.supplierId,
          }
        }
      }).filter(a=>a)[0]
      if(type === 'jqx'){
        this.$set(this.value.insuranceVoList[index],'jqxCompany',obj.name)
        this.$set(this.value.insuranceVoList[index],'jqxCompanyCode',obj.code)
        this.$set(this.value.insuranceVoList[index],'jqxCompanyId',obj.id)
      }
      if(type === 'syx'){
        this.$set(this.value.insuranceVoList[index],'syxCompany',obj.name)
        this.$set(this.value.insuranceVoList[index],'syxCompanyCode',obj.code)
        this.$set(this.value.insuranceVoList[index],'syxCompanyId',obj.id)
      }
    }

  },
};
</script>

<style lang="scss" scoped>
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
::v-deep.component-upload-image {
  margin-left: 25px !important;
}
</style>


